import React, { memo, useEffect, useRef, useState, useLayoutEffect } from 'react';

import HomeCard from '@/components/home/card';

import { RightOutlined, LeftOutlined } from '@ant-design/icons';

import { linearScroll } from '@/utils';
const CitySection = memo((props: { info: any }) => {
  let { info } = props;

  const CityRef = useRef(null);
  let [x, setX] = useState(0);

  let [curCity, setCurCity] = useState([null]);
  //   console.log(info, '/');

  //   setCurCity(info?.dest_address[0]);
  let [curHouseList, setcurHouseList] = useState([]);

  useLayoutEffect(() => {
    if (Object.keys(info).length == 0) return;

    setCurCity(info.dest_address[0]);

    setcurHouseList(info.dest_list[curCity.name]);
  }, [info]);

  //   setcurHouseList(info.dest_list[curCity.name]);
  const nextClcik = () => {
    console.log(x);
    let maxX = CityRef.current.scrollWidth - CityRef.current.clientWidth;

    let cur = x + 200;

    if (cur >= maxX) cur = maxX;

    linearScroll(CityRef.current, cur, 200);
    setX(cur);
    console.log(CityRef.current.scrollLeft);
  };
  const preClcik = () => {
    if (x <= 0) return;

    let cur = x - 200;

    linearScroll(CityRef.current, cur, 200);
    setX(cur);
  };

  let [curIndex, setIndex] = useState(0);

  const changeCurData = (item, index) => {
    setIndex(index);
    setCurCity(item);

    setcurHouseList(info.dest_list[curCity.name]);
  };

  return (
    <>
      <div className="common_width justify-center items-center my-2 ">
        <p className="my-2 text-[20px] font-bold">{info.title}</p>
        <div className=" flex items-center ">
          <p onClick={preClcik} className="border-[2px]  w-[30px] h-[30px] rounded-[50%] relative box_shadow1 cursor-pointer ">
            <LeftOutlined className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]" />
          </p>
          <div ref={CityRef} className="transition-all ease duration-200  flex  mx-2  w-[800px] overflow-hidden">
            {info.dest_address?.map((item, index) => (
              <>
                <p
                  onClick={() => changeCurData(item, index)}
                  className={`${
                    index == curIndex ? 'bg-red-300 text-white' : ''
                  }  min-w-[70px] flex-none text-center mx-1 box_shadow1 cursor-pointer   border-[1px] p-2`}
                >
                  {item.name}
                </p>
              </>
            ))}
          </div>

          <p onClick={nextClcik} className="border-[2px]  w-[30px] h-[30px] rounded-[50%] relative box_shadow1 cursor-pointer ">
            <RightOutlined className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]" />
          </p>
        </div>
      </div>
      <div className="common_width ">
        <div className="grid gap-4 grid-cols-3">
          {curHouseList &&
            curHouseList.map((item, index) => {
              return <HomeCard item={item} key={item.id}></HomeCard>;
            })}
        </div>
      </div>
    </>
  );
});

export default CitySection;
